@extends('layouts.app')

@section('content')
    <link href="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        分类
                    </div>
                    <div class="list-group" id="category" style="max-height: 700px; overflow-y: scroll;">
                        <list-group-item v-for="item in items" v-bind:item="item"></list-group-item>
                    </div>
                </div>
            </div>

            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        详细信息 <a target="_blank" id="link">链接</a>
                    </div>
                    <div class="panel-body" id="detail">
                        <div class="panel">
                          <div class="panel-body">
                            <div class="row">
                              <div class="col-xs-12">
                                <input type="hidden" id="fund_id">
                                <textarea id="content" class="form-control" rows="3"></textarea>
                              </div>
                            </div>
                            <br />
                            <div class="row">
                              <div class="col-xs-8">
                                <input type="text" id="next_day" class="form-control" placeholder="日期">
                              </div>
                              <div class="col-xs-4">
                                <button type="button" id="submit" class="btn btn-default btn-block">提交</button>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="panel panel-warning" v-for="item in items">
                          <div class="panel-heading">
                            <h3 class="panel-title">@{{ item.created_at }}
                                <button type="button" class="btn btn-default btn-xs btn_remove" data="@{{ item.id }}"><span class="glyphicon glyphicon-remove"></span></button>
                            </h3>
                          </div>
                          <div class="panel-body" v-html="item.content">
                          </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        行情
                    </div>
                    <div class="panel-body">
                        <div class="panel">
                          <div class="panel-body">
                            <div class="row">
                              <div class="col-xs-12">
                                <textarea class="form-control" rows="8"></textarea>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection



@section('script')
<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
    Vue.component('list-group-item', {
        props: ['item'],
        template: '<a href="#" class="list-group-item @{{ item.status | fundStatus }}" data="@{{ item.code }}">' + 
        '<span class="badge">@{{ item.next_day }}</span>' +
        '@{{ item.code }} - @{{ item.name }} (@{{ item.week_rank }} | @{{ item.month_rank }})' + 
        '<br />@{{ item.type }} (@{{ item.rate | getRate }})' +
        '</a>'
    });

    Vue.filter('getRate', function(value) {
        return value == 0 ? '无评级' : value + '星';
    });

    Vue.filter('fundStatus', function(value) {
        var arr = ['list-group-item-null', 'list-group-item-warning', 'list-group-item-info'];
        return arr[value];
    });

    var list_item = {items: null};
    var category = new Vue({
        el: '#category',
        data: {
            items: []
        },
        methods: {
            click: function(e){
                var el = $(e.target);
                el.addClass('active').siblings().removeClass('active');

                var code = el.attr('data');
                return false;
            }
        },
        ready: function(){
            var self = this;
            $(self.$el).on('click', '.list-group-item', function(e){
                return self.click(e);
            });
        }
    });

    var detail = new Vue({
        el: '#detail',
        data: list_item
    });

    function getList(){
        $.get("fund/list", function(data){
            category.items = data;
        });
    }
    getList();

    $('#next_day').datepicker({
        format: "yyyy-mm-dd",
        // language: "zh-CN",
        autoclose: true,
        todayHighlight: true
    });

    $('#detail').on('click', '.btn_remove', function(e){
        var obj = $(this);
        $.post("log_remove", 
            { id: obj.attr('data'), _token: '{{ csrf_token() }}' },
            function( data ) {
                if (data.code == 0) {
                    obj.parent().parent().parent().hide();
                }
            }
        );
    });
</script>
@endsection